<template>
	<el-button type="primary" @click="add()">新增用户</el-button>
	<el-button type="danger" @click="batchDel()">批量删除</el-button>

	<el-table :data="userList" style="width: 100%" @selection-change="handleSelectionChange">
		<el-table-column type="selection" width="55" />
		<el-table-column type="index" label="序号" width="60" />
		<el-table-column property="loginAct" label="账号" />
		<el-table-column property="name" label="姓名" show-overflow-tooltip />
		<el-table-column property="phone" label="手机" show-overflow-tooltip />
		<el-table-column property="email" label="邮箱" show-overflow-tooltip />
		<el-table-column property="createTime" label="创建时间" show-overflow-tooltip />
		<el-table-column label="操作" show-overflow-tooltip>
			<template #default="scope">
				<el-button type="primary" @click="view(scope.row.id)">详情</el-button>
				<el-button type="success" @click="edit(scope.row.id)">编辑</el-button>
				<el-button type="danger" @click="del(scope.row.id)">删除</el-button>
			</template>
		</el-table-column>
	</el-table>

	<el-pagination background layout="prev, pager, next" :page-size="pageSize" :total="total" @prev-click="toPage"
		@next-click="toPage" @current-change="toPage" />

	<!-- 新增用户的弹窗(对话框) -->
	<el-dialog v-model="userDialogVisible" :title="userQuery.id > 0 ? '编辑用户' : '新增用户'" width="50%" center draggable>


		<el-form ref="userRefFrom" :model="userQuery" label-width="110px" :rules="userRules">

			<el-form-item label="账号" prop="loginAct">
				<el-input v-model="userQuery.loginAct" />
			</el-form-item>

			<!-- 编辑 -->
			<el-form-item label="密码" v-if="userQuery.id > 0">
				<el-input type="password" v-model="userQuery.loginPwd" />
			</el-form-item>

			<!-- 新增 -->
			<el-form-item label="密码" prop="loginPwd" v-else>
				<el-input type="password" v-model="userQuery.loginPwd" />
			</el-form-item>

			<el-form-item label="姓名" prop="name">
				<el-input v-model="userQuery.name" />
			</el-form-item>

			<el-form-item label="手机" prop=phone>
				<el-input v-model="userQuery.phone" />
			</el-form-item>

			<el-form-item label="邮箱" prop=email>
				<el-input v-model="userQuery.email" />
			</el-form-item>

			<el-form-item label="账号未过期" prop="accountNoExpired">
				<el-select v-model="userQuery.accountNoExpired" placeholder="请选择">
					<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
				</el-select>
			</el-form-item>

			<el-form-item label="密码未过期" prop="credentialsNoExpired">
				<el-select v-model="userQuery.credentialsNoExpired" placeholder="请选择">
					<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
				</el-select>
			</el-form-item>

			<el-form-item label="账号未锁定" prop="accountNoLocked">
				<el-select v-model="userQuery.accountNoLocked" placeholder="请选择">
					<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
				</el-select>
			</el-form-item>

			<el-form-item label="账号是否启用" prop="loginAct">
				<el-select v-model="userQuery.accountEnabled" placeholder="请选择">
					<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
				</el-select>
			</el-form-item>

		</el-form>

		<template #footer>
			<div class="dialog-footer">
				<el-button @click="userDialogVisible = false">取消</el-button>
				<el-button type="primary" @click="userSubmit()">
					添加
				</el-button>
			</div>
		</template>
	</el-dialog>

</template>

<script>
	import {
		defineComponent
	} from 'vue'
	import {
		doDelete,
		doGet,
		doPost,
		doPut
	} from '../http/httpRequest'
	import {
		messageConfirm,
		messageTip
	} from '../util/util';

	export default defineComponent({

		// 注入父级页面提供的所有属性、函数对象
		inject: ['reload'],

		name: "UserView",
		data() {
			return {
				// 用户列表数据，初始值是空
				userList: [{}],
				pageSize: 0,
				total: 0,
				// 用户的弹窗是否弹出来，true就弹出来，false就不弹
				userDialogVisible: false,
				// 添加用户表单对象
				userQuery: {},
				//定义新增用户表单提交时的验证规则
				userRules: {
					loginAct: [{
							required: true,
							message: '登录账号不能为空',
							trigger: 'blur'
						},
						{
							min: 3,
							max: 32,
							message: '登录账号长度范围为3-32个字符',
							trigger: 'blur'
						}
					],
					loginPwd: [{
							required: true,
							message: '登录密码不能为空',
							trigger: 'blur'
						},
						{
							min: 6,
							max: 16,
							message: '登录密码长度为6-16位',
							trigger: 'blur'
						}
					],
					name: [{
							required: true,
							message: '姓名不能为空',
							trigger: 'blur'
						},
						{
							pattern: /^[\u4e00-\u9fa5]{0,}$/,
							message: '姓名必须是中文汉字',
							trigger: 'blur'
						}
					],
					phone: [{
							required: true,
							message: '手机号码不能为空',
							trigger: 'blur'
						},
						{
							pattern: /^1[3-9]\d{9}$/,
							message: '手机号码格式有误',
							trigger: 'blur'
						}
					],
					email: [{
							required: true,
							message: '邮箱不能为空',
							trigger: 'blur'
						},
						{
							pattern: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
							message: '邮箱格式有误',
							trigger: 'blur'
						}
					],
					accountNoExpired: [{
						required: true,
						message: '请选择账号是否未过期',
						trigger: 'blur'
					}, ],
					credentialsNoExpired: [{
						required: true,
						message: '请选择密码是否未过期',
						trigger: 'blur'
					}, ],
					accountNoLocked: [{
						required: true,
						message: '请选择账号是否未未锁定',
						trigger: 'blur'
					}, ],
					accountEnabled: [{
						required: true,
						message: '请选择账号是否可用',
						trigger: 'blur'
					}, ]
				},
				//定义账号未过期的数组
				options: [{
						label: '是',
						value: 1
					},
					{
						label: '否',
						value: 0
					}
				],
				// 存放用户id的数组
				userIdArray: [],

			}
		},

		mounted() {
			this.getData(1);
		},

		methods: {
			// 勾选或者取消勾选时，触发该函数(已经勾选的数据会传给我们这个函数)
			handleSelectionChange(selectionDataArray) {
				this.userIdArray = []
				console.log(selectionDataArray)
				selectionDataArray.forEach(data => {
					let userId = data.id
					this.userIdArray.push(userId)
				})
			},
			// 查询用户数据
			getData(current) {
				doGet("/api/users", {
					current: current
				}).then(resp => {
					console.log(resp)
					if (resp.data.code === 200) {
						this.userList = resp.data.data.list
						this.pageSize = resp.data.data.pageSize
						this.total = resp.data.data.total
					}
				})
			},

			// 分页函数(current这个参数是element-plus组件传过来的，就是传的当前页)
			toPage(current) {
				this.getData(current)
			},


			view(id) {
				console.log(id)
				// 跳转到/dashboard/user/1路由上
				this.$router.push("/dashboard/user/" + id)
			},

			add() {
				// 避免新增时有数据
				this.userQuery = {}
				this.userDialogVisible = true
			},

			// 新增用户
			userSubmit() {
				let formData = new FormData()
				for (let field in this.userQuery) {
					// formDate存的是键值对形式
					formData.append(field, this.userQuery[field])
				}

				this.$refs.userRefFrom.validate((valid) => {
					if (valid) {

						// 编辑
						if (this.userQuery.id > 0) {

							doPut("/api/user/update", formData).then(resp => {

								if (resp.data.code === 200) {
									messageTip("编辑成功", "success")
									// 关闭弹窗
									//this.userDialogVisible = false
									// 页面刷新
									this.reload()
								} else {
									messageTip("编辑失败", "error")
								}

							})
						} else {
							// 新增
							doPost("/api/user/add", formData).then(resp => {
								if (resp.data.code === 200) {
									messageTip("提交成功", "success")
									// 关闭弹窗
									//this.userDialogVisible = false
									// 页面刷新
									this.reload()
								} else {
									messageTip("提交失败", "error")
								}

							})
						}
					}

				})
			},

			// 编辑用户
			edit(id) {
				this.userDialogVisible = true
				this.loadUser(id)
			},

			// 加载用户
			loadUser(id) {
				doGet("/api/user/" + id, {}).then(resp => {
					if (resp.data.code === 200) {
						this.userQuery = resp.data.data
						this.userQuery.loginPwd = ""
					}
				})
			},
			// 删除用户
			del(id) {
				messageConfirm("您确定要删除该数据吗？").then(() => { // 点击确定触发.then函数
					doDelete("/api/user/" + id, {}).then(resp => {
						if (resp.data.code === 200) {
							messageTip("删除成功", "success")
							this.reload()
						} else {
							messageTip("删除失败，原因：" + resp.data.msg, "error")
						}
					})
				}).catch(() => { // 点击取消，触发.catch函数
					messageTip("取消删除", "success")
				})
			},
			// 批量删除用户
			batchDel() {

				if (this.userIdArray.length <= 0) {
					messageTip("请选择要删除的数据", "warning")
					return
				}


				messageConfirm("您确定要删除该数据吗？").then(() => {

					// 原来是数组,[1,2,3,4,5] -->ids = 1,2,3,4,5
					let ids = this.userIdArray.join(",")
					doDelete("/api/user/", {
						ids: ids
					}).then(resp => {
						if (resp.data.code === 200) {
							messageTip("批量删除成功", "success")
							// 页面刷新
							this.reload()
						} else {
							messageTip("批量删除失败，原因：" + resp.data.msg, "error")
						}
					})

				}).catch(() => { // 点击取消，触发.catch函数
					messageTip("取消删除", "success")
				})
			}
		}
	})
</script>

<style>
	.el-table {
		margin-top: 12px;
	}

	.el-pagination {
		margin-top: 12px;
	}

	.el-select {
		width: 100%;
	}
</style>